<template>
  <div>
    <!-- 标签栏 -->
    <van-nav-bar :title="isTitle ? '登录' : '注册'" left-arrow @click-left="onClickLeft">
      <template #right>
        <van-icon name="ellipsis" size="18" />
      </template>
    </van-nav-bar>

    <!-- logo -->
    <img src="../../assets/logo.png" alt="" width="200">
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field v-model="username" name="用户名" label="用户名" placeholder="手机号" :rules="[{ required: true, message: '请填写用户名' }]" />
        <van-field v-model="password" type="password" name="密码" label="密码" placeholder="密码" :rules="[{ required: true, message: '请填写密码' }]" />
        <van-field v-model="userIdentifyCode" type="string" name="验证码" label="验证码" placeholder="验证码" :rules="[{ required: true, message: '请填写验证码' }]" />
      </van-cell-group>
      <div>
        <p @click="isTitle = !isTitle">{{ isTitle ? '立即注册' : '已有账号,立即登录' }}</p>
      </div>
      <div class="right">
        <SIdentify :identifyCode="identifyCode" :re='re' @click="refreshIdentifyCode">
        </SIdentify>
      </div>
      <div style="margin: 16px;">
        <van-button round block type="primary" native-type="submit">
          {{ isTitle ? '登录' : ' 注册' }}
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script setup>
import { ref, reactive, toRefs, onBeforeMount, isReactive, nextTick } from 'vue';
import SIdentify from '../../components/SIdentify.vue';
import { register, login } from '@/api/index.js';
import { showNotify } from 'vant';
import { useRoute, useRouter } from "vue-router"

let identifyCode = ref('')
let userInfo = reactive({
  username: '',
  password: '',
  userIdentifyCode: '',
  isTitle: true,
  re: true,
})
let route = useRoute();
let router = useRouter();
let identifyCodes = "1234567890abcdefghijklmnopqrstuvwxyz"

let { username, password, isTitle, userIdentifyCode, re } = toRefs(userInfo)

let onClickLeft = () => {


}
let onSubmit = () => {
  if (userIdentifyCode.value == identifyCode) {
    if (userInfo.isTitle) {
      // 表示登录
      // console.log("登录...");
      login(userInfo.username, userInfo.password).then(data => {
        // console.log(data);
        if (data.resultCode == 200) {
          localStorage.setItem("mltoken", data.data)
          if (route.query.needback == 1) {
            router.back()
          } else {
            router.replace("/home")
          }
          showNotify({
            type: 'success',
            message: "登录成功"
          });
        }
      })
    } else {
      // 表示注册
      // console.log("注册...");
      register(userInfo.username, userInfo.password).then(data => {
        console.log(data);
        if (data.resultCode == 200) {
          showNotify({
            type: 'success',
            message: "注册成功"
          });
          userInfo.isTitle = true // 注册成功后开始登录
        }
      })
    }
  } else {
    showNotify({ message: '验证码错误' });
  }


}

onBeforeMount(() => {
  identifyCode = '';
  makeIdentifyCode(4);
})
//  console.log(identifyCode);
let refreshIdentifyCode = () => {
  identifyCode = '';
  makeIdentifyCode(4);
  re.value = false;
  //更新 通过v-if='re' 或者 :re=re
  nextTick(() => {
    re.value = true;
  })
}

// 生成4位数的随机验证码
let makeIdentifyCode = (l) => {
  for (let i = 0; i < l; i++) {
    identifyCode += identifyCodes[randomNum(0, identifyCodes.length)];
  }
}
// 生成单个验证码
let randomNum = (min, max) => {
  return Math.floor(Math.random() * (max - min) + min);
}
</script>

<style  scoped>
img {
  width: 3.2rem;
  height: 3.2rem;
  display: block;
  margin: 36px auto 0;
}


p {
  margin-top: 10px;
  margin-left: 10px;
  float: left;
  font-size: 0.37333rem;
  margin-bottom: 0.53333rem;
  color: #1989fa;
  display: inline-block;
}

.right {
  float: right;
}
</style>